<template>
  <div class="container">
    <div class="noAccount" v-show="noAccount">
      <el-row class="noDataInfo">
        <img src="../../../static/img/noDataInfo.png" alt />
      </el-row>
      <el-row class="payOffInfoCancel">
        <p>尚未设置工资专户</p>
      </el-row>
    </div>
    <div v-show="yesAccount" class="mainCon">
      <el-row style="padding: 0px 24px 24px 24px">
        <div
          class="accountInfo"
          :class="isEsUser() ? 'accountInfo isEsAccountInfo' : 'accountInfo'"
        >
          <el-row>
            <el-col :md="14" :lg="12" :xl="12">
              <div class="bankInfoTitle">当前专户信息</div>
              <el-row class="bankInfo">
                <el-col :md="12" :lg="14" :xl="14">
                  <p class="color999">专户银行</p>
                  <p class="color333">{{ bankName || '--' }}</p>
                  <p class="color999 marTop">专户名称</p>
                  <p class="color333">{{ accountName || '--' }}</p>
                  <p class="color999 marTop">专户账号</p>
                  <p class="color333">{{ account || '--' }}</p>
                </el-col>
                <el-col :md="12" :lg="10" :xl="10">
                  <p class="color999">银行网点</p>
                  <p class="color333">{{ bankSiteName || '--' }}</p>
                  <p class="color999 marTop">专户开设凭证</p>
                  <p class="color333">
                    <span v-if="openCertificateFiles.length > 0">
                      <span>已上传</span>
                      <span class="seeFile" @click="toUploadFile()">查看</span>
                      <contractEnclosureDialog
                        v-if="uploadContract"
                        dialogTitle="专户开设凭证"
                        :tableData="openCertificateFiles"
                        @closeDialog="hiddenDialog"
                      ></contractEnclosureDialog>
                    </span>
                    <span v-else>未上传</span>
                  </p>
                  <p class="color999 marTop" v-if="isCzUser()">
                    农民工工资委托发放四方协议
                  </p>
                  <p class="color999 marTop" v-else>
                    农民工工资委托发放三方协议
                  </p>
                  <p class="color333">
                    <span v-if="agreementFiles.length > 0">
                      <span>已上传</span>
                      <span class="seeFile" @click="toUploadFileTwo()"
                        >查看</span
                      >
                      <contractEnclosureDialog
                        v-if="uploadContractTwo"
                        :dialogTitle="
                          isCzUser()
                            ? '农民工工资委托发放四方协议'
                            : '农民工工资委托发放三方协议'
                        "
                        :tableData="agreementFiles"
                        @closeDialog="hiddenDialogTwo"
                      ></contractEnclosureDialog>
                    </span>
                    <span v-else>未上传</span>
                  </p>
                  <p
                    class="color999 marTop"
                    v-if="
                      isEsUser() &&
                      (userTypeCode == 'PROJECT_ADMINISTRATOR' ||
                        userTypeCode == 'LABOR_ADMINISTRATOR' ||
                        userTypeCode == 'MONITOR' ||
                        userTypeCode == 'COMPANY' ||
                        userTypeCode == 'DIRECTOR' ||
                        userTypeCode == 'PROJECT_OWNER' ||
                        userTypeCode == 'AREAMANAGE')
                    "
                  >
                    人工费补充协议
                  </p>
                  <p
                    class="color333"
                    v-if="
                      isEsUser() &&
                      (userTypeCode == 'PROJECT_ADMINISTRATOR' ||
                        userTypeCode == 'LABOR_ADMINISTRATOR' ||
                        userTypeCode == 'MONITOR' ||
                        userTypeCode == 'COMPANY' ||
                        userTypeCode == 'DIRECTOR' ||
                        userTypeCode == 'PROJECT_OWNER' ||
                        userTypeCode == 'AREAMANAGE')
                    "
                  >
                    <span v-if="LabourCostFiles.length > 0">
                      <span>已上传</span>
                      <span class="seeFile" @click="toUploadFileTwo()"
                        >查看</span
                      >
                      <contractEnclosureDialog
                        v-if="uploadContractTwo"
                        dialogTitle="人工费补充协议"
                        :tableData="LabourCostFiles"
                        @closeDialog="hiddenDialogTwo"
                      ></contractEnclosureDialog>
                    </span>
                    <span v-else>未上传</span>
                  </p>
                </el-col>
              </el-row>
            </el-col>
            <el-col
              :md="10"
              :lg="{ span: 8, offset: 1 }"
              :xl="{ span: 8, offset: 1 }"
            >
              <div class="bankInfoTitle">项目专户统计</div>
              <div class="bankInfo">
                <p class="color999">工资专户余额（元）</p>
                <p class="color333 balace" style="font-size: 20px">
                  {{ balance | splitNumber }}
                </p>
                <div class="botBorder"></div>
                <div class="payoff">
                  <div>
                    <p class="color999">总缴纳（元）</p>
                    <p class="color333">{{ payTotal | splitNumber }}</p>
                  </div>
                  <div>
                    <p class="color999">总支出（元）</p>
                    <p class="color333">{{ expensesTotal | splitNumber }}</p>
                  </div>
                </div>
                <!-- 如果项目有多个专户 -->
                <p class="moreAccount" v-if="accountList.length > 1">
                  本项目曾使用多个专户
                  <el-link type="primary" @click="lookAccountList"
                    >查询各专户缴存情况&gt;&gt;</el-link
                  >
                </p>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-row>
      <div class="spacing"></div>
      <el-row class="" style="padding: 24px">
        <div class="secondaryTitle secondaryTitleTheme">
          流水明细
          <el-tooltip content="Top center" placement="top" effect="dark">
            <div slot="content">
              流水将展示出用过的所有专户在项目上产生的流水记录
            </div>
            <i class="icon iconfont iconhuabanfuben"></i>
          </el-tooltip>
        </div>
        <div
          v-if="tipsInfo"
          class="tipsInfo"
          style="
            position: absolute;
            left: 90px;
            top: 33px;
            color: #ff4d4a;
            font-size: 14px;
          "
        >
          {{ tipsInfo }}
        </div>
      </el-row>
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="时间" class="row-padding-bottom">
              <el-date-picker
                v-model="filterField.createDate"
                type="date"
                placeholder="请选择"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="专户账号" class="row-padding-bottom">
              <el-input
                v-model="filterField.account"
                placeholder="请输入专户账号"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="类型" class="row-padding-bottom">
                <el-select
                  v-model="filterField.type"
                  filterable
                  placeholder="请选择类型"
                  clearable
                >
                  <el-option
                    v-for="item in typeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
          <el-form-item>
            <a
              @click="toggleAdvanced"
              style="margin-left: 40px; color: #409eff; cursor: pointer"
              class="btnColor"
            >
              {{ advanced ? '收起' : '展开' }}
              <i
                :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              ></i>
            </a>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
            <!-- <exportBtn :dataLen="salaryAccountList.length" :filterField="filterField" :api="api"></exportBtn>
             <el-button v-if="syncAccountBtn" class="commonBut saveBtn funComBut" style="vertical-align: inherit" @click="toSyncAccount" :loading="canSync">
                <span class="opetareText">刷新数据</span>
            </el-button>
            <el-tooltip v-if="syncAccountBtn" content="Top center" placement="top" effect="dark">
                <div slot="content">
                  获取最新专户流水数据
                </div>
                <i class="icon iconfont iconhuabanfuben"></i>
            </el-tooltip> -->
          </el-form-item>
          <!-- <div style="display:inline-block">
            <div class="uploadBox" v-if="isHefeng">
              <el-button type="primary" class="createSalaryBut" @click="manualAddDeposit">添加</el-button>
            </div>
          </div> -->
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div style="margin-bottom: 24px">
          <exportBtn
            :dataLen="salaryAccountList.length"
            :filterField="filterField"
            :api="api"
          ></exportBtn>
          <el-button
            v-if="isHefeng"
            type="primary"
            class="createSalaryBut"
            style="vertical-align: top"
            @click="manualAddDeposit"
            >添加</el-button
          >
          <el-button
            v-if="syncAccountBtn"
            class="commonBut saveBtn funComBut"
            style="vertical-align: top"
            @click="toSyncAccount"
            :loading="canSync"
          >
            <span class="">刷新数据</span>
          </el-button>
          <el-tooltip
            v-if="syncAccountBtn"
            content="Top center"
            placement="top"
            effect="dark"
          >
            <div slot="content">获取最新专户流水数据</div>
            <i class="icon iconfont iconhuabanfuben"></i>
          </el-tooltip>
          <div
            class="searchTableActions"
            style="display: inline-block; margin-bottom: 0"
          >
            <span class="color333"
              >流水信息上次更新时间{{
                getTime
              }}，如流水未更新，请联系开户银行。</span
            >
          </div>
        </div>
        <el-table
          v-if="isHefeng"
          ref="tableBox1"
          :max-height="tableHeight"
          :data="salaryAccountList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          @sort-change="sortChange"
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="rn"
            label="序号"
            align="center"
            :formatter="formatTd"
            width="175px"
          ></el-table-column>
          <el-table-column
            prop="typeDesc"
            label="缴存/支出"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="total"
            label="交易金额(元)"
            sortable="custom"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <!--        <el-table-column prop="balance" label="余额(元)" align="center" :formatter="formatTd"></el-table-column>-->
          <el-table-column
            prop="createTime"
            label="交易日期"
            sortable="custom"
            align="center"
            :formatter="format"
            width="175px"
          >
          </el-table-column>
          <el-table-column
            prop="account"
            label="账号"
            align="center"
            :formatter="formatTd"
            width="230px"
          ></el-table-column>
          <el-table-column label="备注" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.remark"
                :columnName="'remark'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-link type="primary" @click="manualUpdateDeposit(scope.row)"
                >修改</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关工资专户数据"></emptyTable>
          </div>
        </el-table>
        <el-table
          v-else
          :data="salaryAccountList"
          ref="tableBox1"
          :max-height="tableHeight"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          @sort-change="sortChange"
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="createTime"
            label="时间"
            align="center"
            sortable="custom"
            :formatter="format"
            width="175px"
          ></el-table-column>
          <el-table-column
            prop="total"
            label="金额(元)"
            sortable="custom"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="typeDesc"
            label="类型"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="bankName"
            label="银行"
            align="center"
            :formatter="formatTd"
            v-if="!isHefeng"
          ></el-table-column>
          <el-table-column
            prop="account"
            label="账号"
            align="center"
            :formatter="formatTd"
            width="230px"
            v-if="!isHefeng"
          ></el-table-column>
          <!-- <el-table-column prop="remark" label="备注" align="center" :formatter="formatTd"></el-table-column> -->
          <el-table-column label="备注" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.remark"
                :columnName="'remark'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="bankName"
            label="流水来源"
            align="center"
            :formatter="formatTd"
            v-if="isHefeng"
          ></el-table-column>
          <el-table-column label="操作" align="center" v-if="isHefeng">
            <template slot-scope="scope">
              <el-link type="primary" @click="manualUpdateDeposit(scope.row)"
                >修改</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关工资专户数据"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
    </div>
    <el-dialog
      title="修改工资专户信息"
      :visible.sync="accountFormVisible"
      :close-on-click-modal="false"
      @close="cancelAccountDialog('accountForm')"
      width="640px"
      custom-class="brand-dialog-min-width accountDialog"
      :modal-append-to-body="false"
      class="oneColumnDialog"
    >
      <el-form
        :model="accountForm"
        :rules="formRules"
        ref="accountForm"
        class="addAccount"
        label-width="126px"
        style="padding-top: 8px"
      >
        <el-form-item
          label="项目名称："
          prop="projectId"
          v-if="userTypeCode != 'MONITOR'"
        >
          <el-select
            v-model="accountForm.projectId"
            placeholder="请选择"
            class="optionWidth"
            clearable
            filterable
            disabled
          >
            <el-option
              v-for="(item, index) of projectListOptions"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称：" prop="projectId" v-else>
          <el-select
            v-model="accountForm.projectId"
            placeholder="请选择"
            class="optionWidth"
            clearable
            filterable
            disabled
          >
            <el-option
              v-for="(item, index) of projectOptions"
              :key="index"
              :label="item.projectName"
              :value="item.projectId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开户银行：" prop="bankId">
          <el-select
            v-model="accountForm.bankId"
            placeholder="请选择"
            class="optionWidth"
            clearable
            filterable
            :disabled="accountForm.projectTotal > 0 || isDisabled"
            @change="changeBankId"
          >
            <el-option
              v-for="(item, index) of bankData"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="银行网点：" prop="bankSiteId">
          <el-select
            v-model="accountForm.bankSiteId"
            class="optionWidth"
            :placeholder="
              accountForm.bankId != '' ? '请选择' : '请先选择开户银行'
            "
            clearable
            filterable
            :disabled="isDisabled"
          >
            <el-option
              v-for="(item, index) of bankBranchOptions"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专户账号：" prop="account">
          <el-input
            v-model="accountForm.account"
            autocomplete="off"
            placeholder="请输入"
            class="inputWidth"
            @blur="accountForm.account = changeValue($event)"
            :disabled="isDisabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="专户开户凭证：">
          <uploadAnnex
            style="width: 452px"
            @getFileList="getFileList"
            :limitationFactor="limitationFactor"
            @getFile="getFile"
            :upLoadFile="accountForm.upLoadFileAcc"
          />
        </el-form-item>
        <el-row>
          <el-col :span="24">
            <!-- <elementImage :upLoadFile="accountForm.upLoadFileAcc"   :srcList="accountForm.srcList" :oldSrcList="accountForm.oldSrcList" @changeSrcList="changeSrcList"></elementImage> -->
            <uploadResult
              style="margin-left: 126px !important"
              :resultList="accountForm.upLoadFileAcc"
              @callBackResult="getFile"
            />
          </el-col>
        </el-row>
        <el-form-item label="农民工工资委托发放三方协议：" class="AgreementBox">
          <uploadAnnex
            style="width: 440px"
            @getFileList="getFileListAgr"
            :limitationFactor="limitationFactorAgr"
            @getFile="getFileAgr"
            :upLoadFile="accountForm.upLoadAgreementFile"
          />
          <el-link
            type="primary"
            @click="showPic('seeExampleBox')"
            v-show="checkImg(seeAgreement) && seeAgreement"
            class="download"
            >下载协议模板</el-link
          >
          <el-image
            class="previewImg"
            style="width: 56px; height: 0px"
            :src="seeAgreement"
            :preview-src-list="[seeAgreement]"
            id="seeExampleBox"
            v-show="checkImg(seeAgreement)"
          ></el-image>
          <el-link
            type="primary"
            class="download"
            v-show="!checkImg(seeAgreement) && seeAgreement"
            @click="lookResult(seeAgreement)"
            >下载协议模板</el-link
          >
        </el-form-item>
        <el-row>
          <el-col :span="24">
            <!-- <elementImage :upLoadFile="accountForm.upLoadAgreementFile"   :srcList="accountForm.agrSrcList" :oldSrcList="accountForm.oldAgrSrcList" @changeSrcList="changeSrcListAgreement"></elementImage> -->
            <uploadResult
              style="margin-left: 126px !important"
              :resultList="accountForm.upLoadAgreementFile"
              @callBackResult="getFileAgr"
            />
          </el-col>
        </el-row>
        <el-form-item
          label="人工费补充协议："
          class="agreementBox"
          v-if="
            isEsUser() &&
            (userTypeCode == 'PROJECT_ADMINISTRATOR' ||
              userTypeCode == 'LABOR_ADMINISTRATOR')
          "
        >
          <uploadAnnex
            style="width: 440px"
            @getFileList="getFileListArtificial"
            :limitationFactor="limitationFactorArtificial"
            @getFile="getFileArtificial"
            :upLoadFile="accountForm.upLoadArtificialFile"
          />
          <!-- <el-link type="primary" class="download"  @click="lookResult(seeAgreement)">下载模板</el-link> -->
          <el-link
            type="primary"
            @click="showPic('seeArtificialBox')"
            v-show="checkImg(seeArtificial) && seeArtificial"
            class="download"
            >下载模板</el-link
          >
          <el-image
            class="previewImg"
            style="width: 56px; height: 0px"
            :src="seeArtificial"
            :preview-src-list="[seeArtificial]"
            id="seeArtificialBox"
            v-show="checkImg(seeArtificial)"
          ></el-image>
          <el-link
            type="primary"
            class="download"
            v-show="!checkImg(seeArtificial) && seeArtificial"
            @click="lookResult(seeArtificial)"
            >下载模板</el-link
          >
        </el-form-item>
        <el-row
          v-if="
            isEsUser() &&
            (userTypeCode == 'PROJECT_ADMINISTRATOR' ||
              userTypeCode == 'LABOR_ADMINISTRATOR')
          "
        >
          <el-col :span="24">
            <uploadResult
              style="margin-left: 126px !important"
              :resultList="accountForm.upLoadArtificialFile"
              @callBackResult="getFileArtificial"
            />
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click.native="cancelAccountDialog('accountForm')"
          class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="saveBankInfo('accountForm')"
          class="save"
          :loading="canLogin"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="上传失败"
      :visible.sync="formVisible"
      :close-on-click-modal="false"
      @close="closeDialog"
      custom-class="dialog-minwidth"
      :modal-append-to-body="false"
    >
      <div class="errorNoticeBox">
        <i class="icon iconfont iconshibai1"></i>
      </div>
      <div v-html="errorNotice" class="errorBox"></div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="closeDialog" class="save"
          >确认</el-button
        >
        <el-button @click.native="closeDialog" class="cancel">取消</el-button>
      </div>
    </el-dialog>
    <!--添加,修改-->
    <el-dialog
      :title="manualTitle + '缴存流水'"
      :visible.sync="manualFormVisible"
      :close-on-click-modal="false"
      @close="manualHandleCloseForm"
      custom-class="dialog-minwidth"
      :modal-append-to-body="false"
    >
      <el-form
        :model="manualFormData"
        label-width="80px"
        :rules="manualFormRules"
        ref="manualFormData"
        class="form"
      >
        <el-row>
          <el-col :span="12" class="col-position">
            <el-form-item
              label="项目名称"
              class="row-padding-bottom"
              :label-width="manualFormLabelCardWidth"
            >
              <span>{{ manualFormData.projectName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="col-position">
            <el-form-item label="施工方" class="row-padding-bottom">
              <span>{{ manualFormData.companyName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="col-position">
            <el-form-item
              label="银行"
              class="row-padding-bottom"
              :label-width="manualFormLabelCardWidth"
            >
              <span>{{ manualFormData.bankName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="col-position">
            <el-form-item label="专户账号" class="row-padding-bottom">
              <span>{{ manualFormData.accountCode }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="col-position">
            <el-form-item
              label="缴纳/支出"
              class="row-padding-bottom"
              :label-width="manualFormLabelCardWidth"
              prop="operate"
            >
              <el-select
                class="optionWidth"
                v-model="manualFormData.operate"
                clearable
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in manualOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="col-position">
            <el-form-item
              label="交易金额"
              class="row-padding-bottom"
              prop="journal"
            >
              <el-input-number
                style="width: 100%; text-align: left"
                :precision="2"
                placeholder="请输入交易金额"
                v-model="manualFormData.journal"
                :controls="false"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="col-position">
            <el-form-item
              label="交易日期"
              class="row-padding-bottom"
              :label-width="manualFormLabelCardWidth"
              prop="createDate"
            >
              <el-date-picker
                class="optionWidth"
                v-model="manualFormData.createDate"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="col-position">
            <!-- <el-form-item label="余额" class="row-padding-bottom" prop="balance">
              <el-input v-model="formData.balance" @blur="formData.balance = changeValue($event)" placeholder="请输入交易金额"></el-input>
            </el-form-item>-->
            <el-form-item
              label="余额"
              class="row-padding-bottom"
              prop="balance"
            >
              <el-input-number
                style="width: 100%; text-align: left"
                :precision="2"
                placeholder="请输入交易金额"
                v-model="manualFormData.balance"
                :controls="false"
                :min="0"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="col-position">
            <el-form-item
              label="备注"
              :label-width="manualFormLabelCardWidth"
              prop="remark"
            >
              <el-input
                placeholder="请输入内容"
                v-model="manualFormData.remark"
                clearable
                maxlength="100"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="manualHandleCloseForm" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="toSaveManualPostback"
          class="save"
          :loading="manualCanLogin"
          >保存</el-button
        >
      </div>
    </el-dialog>

    <!-- 查询使用过的专户列表 -->
    <el-dialog
      title="各专户缴存情况"
      :visible.sync="showAccountList"
      :close-on-click-modal="false"
      @close="manualHandleCloseForm"
      custom-class="dialog-minwidth"
      :modal-append-to-body="false"
      width="600px"
    >
      <div class="dialogAccount">
        <div v-for="item in accountList" :key="item.id" class="items">
          <div class="account">
            专户账号({{ item.account }})
            <span
              :class="
                item.account == item.currentAccount
                  ? 'dialogTag success'
                  : 'dialogTag warning'
              "
              effect="dark"
            >
              {{
                item.account == item.currentAccount ? '当前专户' : '历史专户'
              }}
            </span>
          </div>
          <el-row>
            <el-col :span="12"
              ><div class="in">
                <span>期间缴纳</span><span>￥{{ item.payTotal }}</span>
              </div></el-col
            >
            <el-col :span="12"
              ><div class="out">
                <span>期间支出</span><span>￥{{ item.expensesTotal }}</span>
              </div></el-col
            >
          </el-row>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import common from '../../kits/common'
import moment from 'moment'

export default {
  name: 'hfSalarySpecialAccount',
  props: ['projectId'],
  data() {
    var checkMoney = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('金额不能为空'))
      } else {
        if (value >= 10000000000) {
          callback(new Error('金额需小于100亿'))
        } else {
          callback()
        }
      }
    }
    return {
      hiddleToolBar: false,
      tableHeight: null,
      noAccount: false,
      yesAccount: false,
      loading: true,
      isShow: false, //列表加载
      //表格数据
      salaryAccountList: [],
      requestUrl: 'api-acc/accass/expand/list',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
      filterField: {
        createDate: '',
        projectId: '',
        account: '',
        type: '',
      },
      path: '',
      bankName: '', //专户银行
      bankSiteName: '', //银行网点名称
      accountName: '',
      account: '', //专户账号
      balance: '', //专户余额
      payTotal: '', //专户总缴纳
      expensesTotal: '', //专户总支出
      accountFormVisible: false, //是否显示补充专户弹框
      canLogin: false, //专户保存按钮loading
      // 补充专户信息
      accountForm: {
        accountId: '',
        bankId: '',
        account: '',
        upLoadFileAcc: [], //
        srcList: [],
        oldSrcList: [],
        upLoadAgreementFile: [], //三方协议
        agrSrcList: [],
        oldAgrSrcList: [],
        projectId: '',
        bankSiteId: '', //银行网点id
        upLoadArtificialFile: [],
        artSrcList: [],
        oldArtSrcList: [],
      },
      bankData: [],
      formRules: {
        projectId: [
          {
            required: true,
            message: '项目名称不能为空',
            trigger: 'change',
          },
        ],
        bankId: [
          {
            required: true,
            message: '银行不能为空',
            trigger: 'change',
          },
        ],
        account: [
          {
            required: true,
            // pattern: /^([1-9]{1})(\d{11,18})((-)(\d{1,9}))*$/,
            pattern: /^[^\u4e00-\u9fa5]{0,}$/,
            message: '请输入正确格式的账号',
            trigger: 'blur',
          },
        ],
        bankSiteId: [
          {
            required: true,
            message: '银行网点不能为空',
            trigger: 'change',
          },
        ],
      },
      formVisible: false,
      errorNotice: '',
      flieUpload: {
        bankAccount: '',
        projectId: '',
      },
      bankBranchOptions: [], //网点列表
      projectListOptions: [],
      tipsInfo: '',
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传文件最大数量设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M', //自定义报错提示语
        fileId: 'salaryExcel', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm', //自定义id解决一个页面包含多个上传附件
        methodTip:
          '请上传专户开户凭证，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
        messageFileSizetip: '最多能上传5M以内的附件',
      },
      limitationFactorAgr: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传文件最大数量设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M”', //自定义报错提示语
        fileId: 'salaryExcelAgr', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'ExcelAgreement', //自定义id解决一个页面包含多个上传附件
        methodTip:
          '请上传农民工工资委托发放三方协议，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
        messageFileSizetip: '最多能上传5M以内的附件',
      },
      limitationFactorArtificial: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传文件最大数量设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M”', //自定义报错提示语
        fileId: 'salaryExcelArt', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'ExcelArt', //自定义id解决一个页面包含多个上传附件
        methodTip:
          '请上传人工费补充协议，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
        messageFileSizetip: '最多能上传5M以内的附件',
      },
      canSync: false, //加载中
      syncAccountBtn: false,
      manualFormVisible: false,
      manualFormLabelCardWidth: '90px',
      manualCanLogin: false,
      manualTitle: '',
      manualFormData: {
        projectId: '',
        projectName: '',
        companyName: '',
        bankName: '',
        zbjBank: undefined,
        journal: undefined,
        balance: undefined,
        operate: '', //缴纳\支出
        createDate: '', //交易日期
        accountCode: '', //专户账号
        remark: '',
        accountAccessId: '', //专户流水Id
      },
      manualFormRules: {
        projectId: [
          { required: true, message: '项目名称不能为空', trigger: 'change' },
        ],
        bankName: [
          { required: true, message: '银行不能为空', trigger: 'change' },
        ],
        operate: [
          { required: true, message: '缴纳/支出不能为空', trigger: 'blur' },
        ],
        journal: [{ required: true, validator: checkMoney, trigger: 'blur' }],
        balance: [{ required: true, validator: checkMoney, trigger: 'blur' }],
        createDate: [
          { required: true, message: '交易日期不能为空', trigger: 'change' },
        ],
      },
      manualOptions: [
        {
          label: '缴纳',
          value: 'IN',
        },
        {
          label: '支出',
          value: 'OUT',
        },
      ],
      projectName: '',
      pbName: '',
      bankId: '',
      seeAgreement: '',
      openCertificateFiles: [], //专户开设凭证
      agreementFiles: [], //农民工工资委托发放三方协议
      uploadContract: false,
      uploadContractTwo: false,
      getTime: '',
      userTypeCode: '',
      LabourCostFiles: [], //人工费补充协议
      seeArtificial: '',
      api: '',
      isDisabled: false,
      projectOptions: [],
      showAccountList: false,
      accountList: [],
      typeList: [
        {
          name: '缴存',
          id: 'IN',
        },
        {
          name: '支出',
          id: 'OUT',
        },
      ],
      advanced: false,
    }
  },
  created() {
    this.filterField.projectId = this.projectId
    this.userTypeCode = this.$store.state.userType
    this.path = this.$route.query.path
    this.getAcountInfo()
    this.getAccountList()
    this.getProjectList()
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.currentTime()
    //加载银行列表
    this.getBankList()
    this.getApi()
    this.syncAccountBtn =
      this.$store.state.buttonLimitsArr.indexOf('accountList:add') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('accountList:update') > -1
  },
  computed: {
    isHefeng() {
      return this.$store.state.isHefeng
    },
  },
  activated() {
    window.addEventListener('scroll', this.handleScroll, true)
    this.$nextTick(function () {
      this.$refs.tableBox1.doLayout()
    })
  },
  deactivated() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  beforeDestroy() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
    if (this.$route.query.projectId) {
      this.flieUpload.projectId = this.$route.query.projectId
    }
    let that = this
    this.$nextTick(function () {
      let tableHeightCur = this.$refs.tableBox1.$el.clientHeight
      let tableTop = this.$refs.tableBox.getBoundingClientRect().top
      if (tableHeightCur + tableTop > window.innerHeight) {
        this.tableHeight =
          this.$refs.mainCon.getBoundingClientRect().height - 290
      } else {
        document.getElementsByClassName('tableBoxCur').length &&
          (document.getElementsByClassName('tableBoxCur')[0].style.height =
            window.innerHeight - tableTop - 328 + 'px')
      }

      window.onresize = function () {
        if (!that.$refs.tableBox1) {
          return
        }
        let tableHeightCur = that.$refs.tableBox1.$el.clientHeight
        let tableTop = that.$refs.tableBox.getBoundingClientRect().top
        if (tableHeightCur + tableTop > window.innerHeight) {
          that.tableHeight =
            that.$refs.mainCon.getBoundingClientRect().height - 300
        } else {
          document.getElementsByClassName('tableBoxCur').length &&
            (document.getElementsByClassName('tableBoxCur')[0].style.height =
              window.innerHeight - tableTop - 40 + 'px')
        }
      }
    })
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    //查看各专户缴存情况
    lookAccountList() {
      this.showAccountList = true
    },
    //关闭弹窗
    cancelAccountList() {
      this.showAccountList = false
      this.accountList = []
    },
    handleScroll(e) {
      this.$nextTick(function () {
        if (
          this.$refs.tableBox &&
          this.$refs.tableBox.getBoundingClientRect().top < 128
        ) {
          // this.tableHeight = this.$refs.mainCon.getBoundingClientRect().height - 84
          this.tableHeight = window.innerHeight - 232

          if (document.getElementsByClassName('tableBoxCur').length) {
            document.getElementsByClassName('tableBoxCur')[0].style.height =
              null
          }
          this.hiddleToolBar = true
        } else {
          this.hiddleToolBar = false
        }
      })
    },
    changeBankId(val) {
      this.accountForm.bankSiteId = ''
      if (!val) {
        this.bankBranchOptions = []
      } else {
        this.getBankBranchList(val)
      }
    },
    getBankBranchList(bankId) {
      this.axios
        .post('api-acc/accountbank/expand/banksite', { bankId })
        .then((res) => {
          this.bankBranchOptions = res.data.result
          if (res.data.result.length === 0) {
            this.$message({
              message: '请联系银行管理员进行网点信息维护',
              type: 'warning',
            })
          }
        })
        .catch((error) => {
          this.$message({
            message: '获取网点数据失败',
            type: 'error',
          })
        })
    },
    getProjectList() {
      var Data, urlAdress
      if (this.userTypeCode == 'MONITOR') {
        urlAdress = 'api-p/projectstats/expand/list'
        Data = {
          pageNo: 1,
          pageSize: 20,
          projectId: this.projectId,
          projectName: this.$route.query.projectName,
          isSa: '',
        }
      } else {
        urlAdress = 'api-p/projectcompany/expand/current/projects'
        Data = {}
      }

      this.axios({
        method: 'post',
        url: urlAdress,
        data: Data,
      })
        .then((response) => {
          if (this.$store.state.userType == 'MONITOR') {
            this.projectOptions = response.data.result.results
          } else {
            this.projectListOptions = response.data.result
          }
          this.getSeeExample()
          this.getSeeArtificial()
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    getAcountInfo() {
      var url
      if (this.isHefeng) {
        url = 'api-acc/cusBank/expand/accountdetailCustom'
      } else {
        url = 'api-acc/account/expand/accountdetail'
      }
      this.axios({
        method: 'post',
        url: url,
        data: {
          projectId: this.filterField.projectId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            let data = response.data.result
            if (!data.account) {
              this.noAccount = true
            } else {
              this.yesAccount = true
            }
            this.bankName = data.bankName
            this.bankSiteName = data.bankSiteName ? data.bankSiteName : ''
            this.account = data.account
            this.balance = data.balance
            this.payTotal = data.payTotal
            this.expensesTotal = data.expensesTotal
            this.projectName = data.projectName
            this.pbName = data.pbName
            this.bankId = data.bankId
            this.openCertificateFiles = data.openCertificateFiles
            this.agreementFiles = data.agreementFiles
            this.LabourCostFiles = data.labourCostFiles
            this.accountName = data.accountName
            if (this.isYcUser() && this.balance * 1 < 0) {
              this.tipsInfo =
                '流水数据不完整，请联系施工企业登录系统及时分配流水。'
            } else {
              this.tipsInfo = ''
            }
          }
        })
        .catch((error) => {
          this.$message.error('专户数据获取失败')
        })
    },
    //获取专户账号列表
    getAccountList() {
      this.axios
        .post('api-acc/account/expand/findallaccinfo', {
          projectId: this.filterField.projectId,
        })
        .then((res) => {
          if (!res.data.hasError) {
            this.accountList = res.data.result
          }
        })
    },
    getTableList(data) {
      this.salaryAccountList = data
      this.loading = false
      if (this.salaryAccountList.length < 1) {
        this.isShow = true
      }
    },
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    //获取修改专户的信息
    getUpdateAccountInfo() {
      this.axios({
        method: 'post',
        url: 'api-acc/account/expand/accountdetail',
        data: {
          projectId: this.projectId,
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.accountForm.projectId = this.projectId
              this.accountForm.bankId = res.data.result.bankId
              this.accountForm.accountId = res.data.result.id
              this.accountForm.account = res.data.result.account
              this.accountForm.bankSiteId = res.data.result.bankSiteId
                ? res.data.result.bankSiteId == 0
                  ? ''
                  : res.data.result.bankSiteId
                : ''
              if (res.data.result.openCertificateFiles.length > 0) {
                this.accountForm.upLoadFileAcc =
                  res.data.result.openCertificateFiles
                for (
                  var i = 0;
                  i < this.accountForm.upLoadFileAcc.length;
                  i++
                ) {
                  this.accountForm.srcList.push(
                    this.accountForm.upLoadFileAcc[i].url
                  )
                  this.accountForm.oldSrcList.push(
                    this.accountForm.upLoadFileAcc[i].url
                  )
                }
              }
              if (res.data.result.agreementFiles.length > 0) {
                this.accountForm.upLoadAgreementFile =
                  res.data.result.agreementFiles
                for (
                  var i = 0;
                  i < this.accountForm.upLoadAgreementFile.length;
                  i++
                ) {
                  this.accountForm.agrSrcList.push(
                    this.accountForm.upLoadAgreementFile[i].url
                  )
                  this.accountForm.oldAgrSrcList.push(
                    this.accountForm.upLoadAgreementFile[i].url
                  )
                }
              }
              if (res.data.result.labourCostFiles.length > 0) {
                this.accountForm.upLoadArtificialFile =
                  res.data.result.labourCostFiles
                for (
                  var i = 0;
                  i < this.accountForm.upLoadArtificialFile.length;
                  i++
                ) {
                  this.accountForm.artSrcList.push(
                    this.accountForm.upLoadArtificialFile[i].url
                  )
                  this.accountForm.oldArtSrcList.push(
                    this.accountForm.upLoadArtificialFile[i].url
                  )
                }
              }

              this.getBankBranchList(res.data.result.bankId)
            } else {
              this.$message({
                message: res.data.errorMsg,
                type: 'error',
              })
            }
          },
          (res) => {
            this.$message({
              message: '获取专户信息失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
    //修改专户
    updateAccount() {
      this.accountFormVisible = true
      // 当项目录入的专户已经匹配上了银行推送的专户信息（如果银行有推送过来专户余额或者是专户流水）禁止项目端/企业端修改【开户银行】【银行网点】【专户账号】字段
      if (this.userTypeCode !== 'MONITOR') {
        this.hasBankInfo()
      }
      this.$nextTick(function () {
        this.getUpdateAccountInfo()
      })
    },
    cancelAccountDialog() {
      this.accountFormVisible = false
      this.accountForm.srcList = []
      this.accountForm.oldSrcList = []
      this.accountForm.upLoadFileAcc = []
      this.accountForm.upLoadAgreementFile = []
      this.accountForm.agrSrcList = []
      this.accountForm.oldAgrSrcList = []
      this.accountForm.artSrcList = []
      this.accountForm.oldArtSrcList = []
      this.accountForm.upLoadArtificialFile = []
      this.$refs.accountForm.resetFields()
    },
    // 获取银行
    getBankList() {
      this.axios({
        method: 'post',
        data: { type: 'BANK_TYPE' },
        url: 'api-bs/base/dicitem/findbytype',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.bankData = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    changeSrcList(val) {
      this.accountForm.srcList = val
    },
    changeSrcListAgreement(val) {
      this.accountForm.agrSrcList = val
    },
    //保存专户信息
    saveBankInfo() {
      //确定按钮禁止点击
      this.canLogin = true
      this.$refs['accountForm'].validate((valid) => {
        if (valid) {
          let data = {
            projectId: this.projectId,
            id: this.accountForm.accountId,
            account: this.accountForm.account,
            bankId: this.accountForm.bankId,
            openCertificateFile: JSON.stringify(this.accountForm.upLoadFileAcc),
            agreementFile: JSON.stringify(this.accountForm.upLoadAgreementFile),
            labourCostFile: JSON.stringify(
              this.accountForm.upLoadArtificialFile
            ),
            bankSiteId: this.accountForm.bankSiteId, //新增银行网点地段
          }
          this.saveAccountAjax(data)
        } else {
          this.canLogin = false
          return false
        }
      })
    },
    //保存专户的ajax
    saveAccountAjax(data) {
      this.axios({
        method: 'post',
        url: 'api-acc/account/expand/update',
        data: data,
      })
        .then(
          (res) => {
            this.canLogin = false
            if (!res.data.hasError) {
              this.$message({
                message: '保存成功',
                type: 'success',
              })
              this.accountFormVisible = false //关闭弹窗
              this.getAcountInfo()
              this.getAccountList()
            } else {
              this.$message({
                message: res.data.errorMsg,
                type: 'error',
              })
            }
          },
          (res) => {
            this.canLogin = false
            this.$message({
              message: '数据请求失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {
          this.canLogin = false
        })
    },
    // 流水导入 ------start
    waterImportfileChange(e) {
      var that = this
      var url = window.location.href
      var Filedata = $('#waterImportExcel').val()
      var files = e.target.files[0]
      that.flieUpload.bankAccount = that.account
      if (!/\.(xls|xlsx)$/.test(Filedata)) {
        this.$message({
          message: 'excel类型必须是.xls,xlsx中的一种',
          type: 'warning',
        })
        return
      }

      setTimeout(function () {
        that.uploadFileByAjaxSubmit(
          'api-acc/cusBank/expand/customImportAccess',
          that.success,
          that.error
        )
      }, 500)
    },
    uploadFileByAjaxSubmit(url, successCallBack, errorCallBack) {
      const vm = this
      var token = localStorage.getItem('access_token')
      var options = {
        url: common.uploadUrl + url,
        type: 'POST',
        data: vm.flieUpload,
        headers: { Authorization: 'Bearer ' + token },
        contentType: false,
        processData: false,
        success: function (data) {
          $('#waterImportExcel').val('')
          successCallBack(data)
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          $('#waterImportExcel').val('')
          errorCallBack(XMLHttpRequest, textStatus, errorThrown)
        },
      }

      //三种方式均可
      $('#waterImportBox').ajaxSubmit(options)
      return false
    },
    success(data) {
      if (!data.hasError) {
        this.$message({
          message: '导入成功',
          type: 'success',
        })
        this.$nextTick(function () {
          this.$refs.pagination.getTableListData()
        })
      } else {
        this.errorNotice = data.errorMsg
        this.formVisible = true
      }
    },
    //根据状态码判断是否是401
    error(XMLHttpRequest, textStatus, errorThrown) {
      if (XMLHttpRequest.status === '401' || XMLHttpRequest.status === '403') {
        localStorage.setItem('access_token', '')
        localStorage.setItem('refresh_token', '')
        localStorage.setItem('userName', '')
        // 只有在当前路由不是登录页面才跳转
        if (router.currentRoute.path !== '/login/loginFirst') {
          router.replace({
            path: '/login/loginFirst',
          })
        }
        //清除tab栏数据
        this.$store.state.sliderBar = []
        localStorage.removeItem('sliderBar')
      } else {
        this.$message({
          message: '数据请求失败',
          type: 'warning',
        })
      }
    },
    closeDialog() {
      this.formVisible = false
    },
    // 流水导入 ------end
    // 流水导入模板下载
    downLoad() {
      window.location.href =
        common.commonApi +
        'api-acc/cusBank/expand/customdownAccess?access_token=' +
        localStorage.getItem('access_token')
    },

    getFileList(val) {
      this.accountForm.oldSrcList.push(val)
      this.accountForm.srcList.push(val)
    },
    getFile(val) {
      this.accountForm.upLoadFileAcc = val
    },
    getFileListAgr(val) {
      this.accountForm.oldAgrSrcList.push(val)
      this.accountForm.agrSrcList.push(val)
    },
    getFileAgr(val) {
      this.accountForm.upLoadAgreementFile = val
    },
    //同步专户流水数据
    toSyncAccount() {
      this.canSync = true
      this.axios({
        method: 'post',
        url: 'api-acc/accass/expand/refreshaccountdetail',
        data: { projectId: this.projectId },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.canSync = false
              this.$message({
                message: response.data.msg,
                type: 'success',
              })
              this.$refs.pagination.getTableListData()
            } else {
              this.canSync = false
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    toSaveManualPostback() {
      let url = ''
      const vm = this
      if (vm.manualTitle == '添加') {
        url = 'api-acc/cusBank/expand/customAddAccountAccess'
      } else {
        url = 'api-acc/cusBank/expand/customUpdateAccountAccess'
      }
      vm.manualCanLogin = true
      vm.$refs.manualFormData.validate((valid) => {
        if (valid) {
          vm.manualFormData.projectId = this.projectId
          vm.axios({
            method: 'post',
            url: url,
            data: vm.manualFormData,
          })
            .then((response) => {
              vm.manualCanLogin = false
              vm.getAcountInfo()
              vm.getAccountList()
              vm.$refs.pagination.getTableListData()
            })
            .catch((error) => {
              vm.manualCanLogin = false
              vm.$message({
                showClose: true,
                duration: 3000,
                message: '保存缴存流水失败',
                type: 'error',
              })
            })
          vm.manualFormVisible = false
        } else {
          vm.manualCanLogin = false
          return false
        }
      })
    },
    manualHandleCloseForm() {
      this.manualFormVisible = false
    },
    manualAddDeposit() {
      const vm = this
      vm.manualTitle = '添加'
      vm.manualFormVisible = true
      // vm.$nextTick(function() {
      //   vm.$refs["manualFormData"].resetFields();
      // });
      vm.manualFormData.projectId = vm.projectId
      vm.manualFormData.projectName = vm.projectName
      vm.manualFormData.companyName = vm.pbName
      vm.manualFormData.bankName = vm.bankName
      vm.manualFormData.accountCode = vm.account
      vm.manualFormData.zbjBank = vm.bankId
      vm.manualFormData.journal = undefined
      vm.manualFormData.balance = undefined
      vm.manualFormData.operate = ''
      vm.manualFormData.createDate = ''
      vm.manualFormData.remark = ''
      vm.manualFormData.accountAccessId = ''
    },
    manualUpdateDeposit(row) {
      const vm = this
      vm.manualTitle = '修改'
      vm.manualFormVisible = true
      vm.manualFormData.projectId = row.projectId
      vm.manualFormData.projectName = row.projectName
      vm.manualFormData.companyName = row.pbName
      vm.manualFormData.bankName = row.bankName
      vm.manualFormData.accountCode = row.account
      vm.manualFormData.zbjBank = row.bankId
      vm.manualFormData.journal = row.total //交易金额
      vm.manualFormData.balance = row.balance //余额
      vm.manualFormData.operate = row.type
      vm.manualFormData.createDate = moment(row.createTime).format('YYYY-MM-DD')
      vm.manualFormData.remark = row.remark
      vm.manualFormData.accountAccessId = row.id
    },
    format(row, column, cellValue) {
      return moment(cellValue).format('YYYY-MM-DD')
    },
    getSeeExample() {
      this.axios({
        method: 'post',
        url: '/api-f/template/download',
        data: {
          typeId: '02',
          projectId: this.projectId,
        },
      }).then((response) => {
        if (!response.data.hasError) {
          this.seeAgreement = response.data.result.templatePath
        }
      })
    },
    downTemp() {
      window.open(this.seeAgreement)
    },
    getName(url) {
      if (url) {
        const fileName = url.lastIndexOf('/') // 取到文件名开始到最后一个点的长度
        const fileNameLen = url.length // 取到文件名长度
        const fileType = url.substring(fileName + 1, fileNameLen) // 截
        return fileType
      }
    },
    checkImg(item) {
      var str = this.getName(item)
      if (str) {
        let arr = str.split('.')
        let name = arr[arr.length - 1]
        if (['png', 'PNG', 'jpg', 'JPG', 'jpeg', 'JPEG'].includes(name)) {
          return true
        }
        return false
      }
    },
    lookResult(url) {
      window.open(url)
    },
    showPic(type) {
      $('#' + type).click()
    },
    toUploadFile() {
      this.uploadContract = true
    },
    hiddenDialog() {
      this.uploadContract = false
    },
    toUploadFileTwo() {
      this.uploadContractTwo = true
    },
    hiddenDialogTwo() {
      this.uploadContractTwo = false
    },
    currentTime() {
      this.getTime = this.getCurrentTime()
    },
    // 人工费补充协议
    getFileListArtificial(val) {
      this.accountForm.oldArtSrcList.push(val)
      this.accountForm.artSrcList.push(val)
    },
    getFileArtificial(val) {
      this.accountForm.upLoadArtificialFile = val
    },
    getSeeArtificial() {
      var projectId = this.accountForm.projectId
        ? this.accountForm.projectId
        : this.firstProjectId
      this.axios({
        method: 'post',
        url: '/api-f/template/download',
        data: {
          typeId: '03',
          projectId: projectId,
        },
      }).then((response) => {
        if (!response.data.hasError) {
          this.seeArtificial = response.data.result.templatePath
        }
      })
    },
    getApi() {
      let loginType = localStorage.getItem('loginType')
      if (loginType === 'JC') {
        this.api = 'api-s/report/export_JC_CS_ACCOUNT_TRANSATION'
      } else {
        this.api = 'api-s/report/export_XM_ACCOUNT_TRANSATION'
      }
    },
    // 是否匹配银行推送的专户信息
    hasBankInfo() {
      this.axios({
        method: 'post',
        url: 'api-acc/account/expand/findBankAccountInfo',
        data: { account: this.$route.query.account },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.isDisabled = false
          } else {
            this.isDisabled = true
            this.$message({
              message: res.data.errorMsg,
              type: 'warning',
            })
          }
        })
        .catch((error) => {})
    },
  },
}
</script>
<style lang="less" scoped>
@import '../../../static/css/filterArea.less';
.container {
  height: calc(100% - 67px);
  .mainCon {
    height: calc(100%);
    //    padding-bottom: 0;
  }
  .noAccount {
    padding-top: 60px;
    text-align: center;
    color: #666666;
    .noDataInfo {
      margin-top: 16px;
    }
  }
  .accountInfo {
    .bankInfoTitle {
      font-size: 16px;
      line-height: 32px;
      color: #333;
      font-weight: 700;
    }
    .bankInfo {
      height: 212px;
      padding: 15px 33px;
      border: 1px solid #dee5f4;
      .balace {
        font-size: 24px;
      }
      .color999 {
        font-size: 14px;
      }
      .color333 {
        font-size: 14px;
        line-height: 34px;
      }
      .marTop {
        margin-top: 14px;
      }
      .botBorder {
        width: 100%;
        height: 1px;
        background: #dee5f4;
        margin: 16px 0;
      }
      .payoff {
        div {
          width: 40%;
          display: inline-block;
        }
      }
      .moreAccount {
        font-size: 14px;
        line-height: 16px;
        height: 16px;
        color: #666;
        vertical-align: text-bottom;
      }
    }
  }
  .isEsAccountInfo {
    .bankInfo {
      padding: 10px 33px;
    }
    .marTop {
      margin-top: 0 !important;
    }
    .color333 {
      line-height: 30px !important;
    }
  }
  .runWater {
    margin-top: 32px;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #dee5f4;
    height: 28px;
  }
  // 修改专户弹窗样式
  .uploadBox {
    position: relative;
    .uploadImg {
      width: 96px;
      height: 36px;
      padding: 0px;
      color: #009588;
      border: 1px solid #009588;
      cursor: pointer;
    }
    .upLoadDom {
      position: absolute;
      width: 96px;
      height: 36px;
      top: 0;
      left: 0;
      opacity: 0;
      line-height: 0px;
      form {
        input {
          width: 96px;
          height: 36px;
          line-height: 0px;
          cursor: pointer;
        }
      }
    }
  }
  .AgreementBox {
    /deep/label {
      line-height: 20px;
    }
  }
  .imgStyle {
    margin-left: 135px;
    li {
      position: relative;
      margin-right: 20px;
      margin-bottom: 20px;
      .iconjian {
        position: absolute;
        right: -6px;
        top: -10px;
        font-size: 20px;
        cursor: pointer;
      }
      .el-image {
        cursor: pointer;
      }
    }
  }
  .createSalaryBut {
    background: #009588;
    border: 1px solid #009588;
    padding: 10px 23px;
    margin-left: 12px;
    &:hover {
      opacity: 0.8;
    }
  }
  .errorNoticeBox {
    text-align: center;
    margin-bottom: 24px;
    i {
      color: red;
      font-size: 50px;
    }
  }
  .errorBox {
    line-height: 24px;
  }
  .download {
    position: absolute;
    right: -5px;
    top: 10px;
  }
  .previewImg {
    position: absolute;
    top: 0;
    left: 0;
    right: 30px;
    cursor: pointer;
    /deep/.el-image__preview {
      opacity: 0;
    }
  }
}
.dialogAccount {
  overflow-y: auto;
  .items {
    border-radius: 5px;
    padding: 16px;
    background-color: #f5f7f9;
    position: relative;
    line-height: 30px;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
    .account {
      font-weight: 600;
      font-size: 16px;
      color: #000;
    }
    .dialogTag {
      display: inline-block;
      height: 20px;
      line-height: 20px;
      padding: 0 8px;
      font-weight: normal;
      font-size: 12px;
      margin-left: 15px;
      vertical-align: middle;
    }
    .success {
      color: #fff;
      background-color: #6dd400;
    }
    .warning {
      color: #fff;
      background-color: #ffc100;
    }
    .in,
    .out {
      span {
        display: block;
        &:first-child {
          font-size: 14px;
          color: #999;
        }
        &:last-child {
          font-size: 16px;
          color: #333;
        }
      }
    }
  }
}
.bankPush {
  margin: 16px 0 16px 24px;
}
.title {
  position: relative;
  padding-left: 20px;
  height: 37px;
  font-size: 16px;
  border-bottom: 2px solid #f5f7fa;
  &::before {
    position: absolute;
    content: '';
    width: 4px;
    height: 24px;
    left: 0;
    top: 0;
    background: #265faa;
  }
}
</style>
